<template>
    <div style="display: flex; justify-content: center"> <!--div 水平居中-->
        <el-card class="box-card" style="width: 450px;margin-top: 100px" v-loading="loading">
            <div slot="header" class="clearfix">
                <span>登录</span>
            </div>
            <div>
                <table>
                    <tr>
                        <td>用户名:</td>
                        <td><el-input v-model="user.account" placeholder="请输入用户名"></el-input></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input></td>
                    </tr>
                    <tr>
                       <td colspan="2">
                           <el-button type="primary" style="width: 400px" @click="doLogin">登录</el-button>
                       </td>
                    </tr>
                </table>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {postRequest} from "../utils/api"; /*导入 api.js 单一方法  vue新特性*/

    postRequest
    export default {
        name: "Login",
        data(){  /*  data() : 是一个方法*/

            return{  /*声明 v-model=" "  变量*/
                loading:false,
                user:{
                    account:"zhangsan", /*赋 默认值*/
                    password:"123"
                }
            }
        },
        methods:{ /*methods ： 是一个属性*/
                doLogin(){
                    /*登录时加载显示*/
                    this.loading=true,
                    //alert(JSON.stringify(this.user))

                    /*postRequest 三个参数：
                    * url 请求地址
                    * 传入的对象
                    * then: 服务器回调的数据
                    * then(msg):等于api.js中的  "return success.data";
                    * */
                    postRequest('/doLogin',this.user).then(msg=>{

                        /*登录后 加载消失*/
                        this.loding=false;

                        /*判断有没有  msg*/
                        if (msg){
                            /*如果有msg 返回msg对应的 json数据*/
                            window.sessionStorage.setItem("user", JSON.stringify(msg.obj));
                            this.$router.replace('/home');
                        }

                    })
                }
        }
    }
</script>

<style scoped>

</style>